<template>
	<router-view/>
	<Dialog
		v-if="dialog.visible"
		v-bind="dialog.props"
		@close="dialog.close()"
	/>
</template>

<script setup>
import Dialog from './scripts/Dialog' ;

import {
	useRouter
} from 'vue-router' ;

import {
	useRouterStore
} from '@/common/stores/router.store' ;

import {
	useDialogStore
} from '@/common/stores/dialog.store' ;

const router = useRouter();

useRouterStore().setup(router);

const dialog = useDialogStore();

router.afterEach(() => dialog.close());

</script>

<style lang="scss" module>

$header-height: 60px;

.viewport {
	position: relative;
	height: 100%;
	background-color: #f6f8f9;
	
	.aside {
		background-color: #545c64;
		display: flex;
		flex-direction: column;
		
		> .logo {
			width: 100%;
			height: $header-height;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		> .body {
			flex: 1;
			min-height: 0;
			display: flex;
			justify-content: center;
		}
		
	}
}

</style>
